<template>
  <view class="views">
    <view class="bg"></view>
    <!-- 顶部导航 -->
    <view class="titles-box">
      <uni-icons type="back" color="#fff" size="25" @click="goBack"></uni-icons>
      <text class="title-name">{{ titles }}</text>
    </view>
    <!-- 注销 -->
    <block v-if="navIndex==1">
      <view class="top-box">
        <view class="txt-box">
          <view class="txt-box-title">
            <image v-if="details.etcCancelStatus===1" class="ready-img" src="/static/imges/await.png" mode="widthFix"></image>
            <image v-if="details.etcCancelStatus===2" class="ready-img" src="/static/imges/success.png" mode="widthFix"></image>
            <image v-if="details.etcCancelStatus===3" class="ready-img" src="/static/imges/fail.png" mode="widthFix"></image>
            <text v-if="details.etcCancelStatus===1">待注销</text>
            <text v-if="details.etcCancelStatus===2" class="txt-btn1">注销成功</text>
            <text v-if="details.etcCancelStatus===3" class="txt-btn2">注销失败</text>
            <text v-if="details.etcCancelStatus===10" class="txt-btn2">待查询</text>
            <text v-if="details.etcCancelStatus===11" class="txt-btn2">待支付</text>
          </view>
          <!--          <view class="details-txt">{{ hintText }}-->
          <!--          </view>-->
        </view>
      </view>
      <!--  -->
      <view class="imglist">
        <view class="" v-for="item in imgList" :key="item.id" v-if="item.img.length>0">
            <view class="imglist-titles">
              <text class="lines"></text>
              <view class="" style="font-size: 26rpx;">{{ item.titles }}</view>
            </view>
            <view class="img-boxs">
              <view class="img-box" v-for="(v,j) in item.img" :key="j">
                <image :src="v" mode="aspectFill" @click="takeImg(v)"></image>
              </view>
            </view>

        </view>
      </view>
      <!--  -->
      <view class="user-detail">
        <view class="cells">
          <text style="width: 204rpx;">联系人</text>
          <text>{{ details.contactName }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">联系电话</text>
          <text>{{ details.contactPhone }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">车牌号码</text>
          <text>{{ details.licensePlateNumber }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">提交时间</text>
          <text>{{ details.createTime }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">注销费用</text>
          <text>￥{{ details.orderMoney || '待查询' }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">注销说明</text>
          <text class="hint">{{ details.etcCancelExplain || '待填写' }}</text>
        </view>
      </view>
    </block>

    <!-- 办理 -->
    <block v-if="navIndex==2">
      <view class="top-box">
        <view class="txt-box">
          <view class="txt-box-title">
            <image v-if="detailsTwo.etcApplyStatus===1" class="ready-img" src="/static/imges/await.png" mode="widthFix"></image>
            <image v-else class="ready-img" src="/static/imges/success.png" mode="widthFix"></image>
            <text v-if="detailsTwo.etcApplyStatus===1">待发货</text>
            <text class="txt-btn1" v-else>已发货</text>
          </view>
          <view class="details-txt">为了保护用户的隐私，用户收到设备自己扫码上传行驶证等资料手机激活即可。
          </view>
        </view>
      </view>
      <view class="user-detail" style="margin-top: 26rpx;">
        <view class="cells">
          <text style="width: 204rpx;">地区地址</text>
          <text class="txt1">{{ detailsTwo.address }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">联系人</text>
          <text>{{ detailsTwo.contactName }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">联系电话</text>
          <text>{{ detailsTwo.contactPhone }}</text>
        </view>
        <view class="cells cells-line">
          <text style="width: 204rpx;">车牌号码</text>
          <text>{{ detailsTwo.licensePlateNumber }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">订单编号</text>
          <text class="txt1">{{ detailsTwo.id }}</text>
        </view>
        <view class="cells" v-if="detailsTwo.etcApplyTrackingNumber">
          <text style="width: 204rpx;">快递单号</text>
          <text class="txt1">{{ detailsTwo.etcApplyTrackingNumber }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">办理类型</text>
          <text>{{ detailsTwo.etcApplyType == 1 ? '绑定支付宝' : '绑定微信' }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">订单金额</text>
          <text>￥ {{ detailsTwo.orderMoney }}</text>
        </view>
        <view class="cells">
          <text style="width: 204rpx;">下单时间</text>
          <text>{{ detailsTwo.createTime }}</text>
        </view>
      </view>
    </block>


    <view class="btn">
      <view class="btn-box1">
        <contact-button
          tnt-inst-id="SLk_aEqp"
          scene="SCE01288627"
          size="88rpx"
          icon="/static/img/custom.png"
        />
		联系客服
      </view>
      <view class="btn-box" v-if="navIndex==1" @click="delOrder(details.id)">删除订单</view>
    </view>
  </view>
</template>

<script lang="ts">
// @ts-nocheck
import Vue from 'vue';
import {delEtcCancelOrder, getEtcApplyDetails, getEtcCancelDetails} from "../../api/order/order";
import {getDictAll} from "../../api/common/dict";

export default Vue.extend({
  data() {
    return {
      navIndex: 1,
      id: 0,
      isShow: false,
      titles: '',
      imgList: [{
        id: 1,
        titles: '身份证照片',
        img: []
      },
        {
          id: 2,
          titles: '行驶证照片',
          img: []
        }
      ],
      details: {},
      detailsTwo: {},
      hintText: '',//待注销提示语
    }
  },
  async onLoad(options: any) {
    this.id = options.id
    this.navIndex = options.navIndex
    if (this.navIndex == 2) {
      this.titles = '办理订单详情'
      await this.getApplyInfo(this.id)
    } else {
      this.titles = '注销订单详情'
      await this.getConcelInfo(this.id)
      await this.getHint();
    }
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },
    async getHint() {
      const params = {
        dictCode: 'write_off_prompt_to_be_signed_out'
      }
      const data = await getDictAll(params)
      // console.log(data,'提示语');
      this.hintText = data[0].dictInfoValue;
    },
    //
    takeImg(url: any) {
      wx.previewImage({
        current: '', // 当前显示图片的 http 链接
        urls: [url] // 需要预览的图片 http 链接列表
      })
    },
    rightClick() {

    },
    backTo() {
      uni.navigateBack()
    },
    //   注销详情
    async getConcelInfo(id: any) {
      const data = await getEtcCancelDetails(id)
      console.log(data, '订单详情')
      this.details = data
      if (data.idcardImg) this.imgList[0].img.push(data.idcardImg);
      if (data.idcardBackImg) this.imgList[0].img.push(data.idcardBackImg)
      if (data.drivingLicenseImg) this.imgList[1].img.push(data.drivingLicenseImg)
      if (data.drivingLicenseBackImg) this.imgList[1].img.push(data.drivingLicenseBackImg)
      console.log(this.imgList, '身份證类表');
    },
    //   办理详情
    async getApplyInfo(id: any) {
      this.detailsTwo = await getEtcApplyDetails(id)
    },
    // 删除注销订单
    async delOrder(id: any) {
      let that = this
      uni.showModal({
        title: '温馨提示',
        content: '您确定要删除这个订单吗?',
        success: (async res => {
          if (res.confirm) {
            const {code, data, msg} = await delEtcCancelOrder(id)
            if (code === 'A000') {
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1500
              })
              uni.redirectTo({
                url: '/pages/index/success?type=2'
              })
              // uni.switchTab({url: '/pages/orders/orders'})
              // uni.redirectTo({url: '/pages/orders/orders'});
              // that.pickNav(this.navIndex)
              // that.listDetail.splice(1,index)
              // that.emptyShow = that.listDetail.length == 0
              // console.log('++++++',that.listDetail)
            } else {
              uni.showToast({
                title: msg,
                icon: 'none',
                duration: 1500
              })
            }
          }
        })
      })
    },
  }
})
</script>

<style scoped>
.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #F6F6F6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/*  */
.titles-box {
  width: 100%;
  position: fixed;
  top: 0;
  height: 160rpx;
  padding-bottom: 15rpx;
  padding-left: 33rpx;
  display: flex;
  align-items: flex-end;

  color: #FFFFFF;
  background-color: #0C77FB;
}

.title-name {
  margin-left: 150rpx;
  padding-bottom: 10rpx;
}

/*  */
.top-box {
  background-color: #0C77FB;
  padding: 30rpx 27rpx 22rpx;
  margin-top: 170rpx;
}

.txt-box {
  background: #FFFFFF;
  border-radius: 15rpx;
  padding: 31rpx 35rpx 28rpx;
}

.ready-img {
  width: 40rpx;
  height: 40rpx;
  margin-right: 17rpx;
}

.txt-box-title {
  display: flex;
  align-items: center;
  font-size: 26rpx;

}

/*状态颜色*/
.txt-btn1 {
  color: #0C77FB;
}

.txt-btn2 {
  color: #F93738;
}

.details-txt {
  display: flex;
  flex-wrap: wrap;
  margin-top: 27rpx;
  font-size: 24rpx;
}

/*  */
.imglist {
  /*margin: 27rpx;*/
  /*margin-top: 26rpx;*/
  margin-bottom: 27rpx;
  padding: 42rpx 24rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 13rpx 1rpx rgba(245, 245, 245, 0.5);
  border-radius: 15rpx;
}

.imglist-titles {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.lines {
  width: 8rpx;
  height: 26rpx;
  background: #0C77FB;
  margin-right: 12rpx;
}

.img-boxs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.img-box image {
  width: 312rpx;
  height: 220rpx;
  border-radius: 20rpx;
}

/*  */
.user-detail {
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 13rpx 1rpx rgba(245, 245, 245, 0.5);
  border-radius: 15rpx;
  margin: 0 27rpx;
  padding: 54rpx 0 30rpx 39rpx;
}

.cells {
  font-size: 26rpx;
  display: flex;
  padding: 24rpx 0;
}

.cells .hint {
  width: 500rpx;
  text-align: justify;
  word-break: break-all;
  padding-right: 20rpx;
  /*border: 1rpx solid pink;*/
}

.cells-line {
  border-bottom: 2rpx solid #EFEFEF;
}

.cells-id {
  width: 400rpx;
}

.txt1 {
  display: flex;
  flex-wrap: wrap;
  width: 404rpx;
}

/*  */
.btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #FFFFFF;
  padding-top: 29rpx;
  padding-bottom: 41rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-box {
  width: 300rpx;
  margin: 0 29rpx;
  /*background-color: #d31919;*/
  text-align: center;
  line-height: 100rpx;
  border-radius: 50px;
  color: #F93738;
  border: 2rpx solid #F93738;
  font-size: 34rpx;;
}

.views {
  padding-bottom: 214rpx;
}

.btn-box1 >>> button {
  width: 300rpx !important;
  border-radius: 50rpx !important;
  background-color: #1A6FFD;
  color: #FFFFFF !important;
}
</style>
